<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{$website['name']|default=''|htmlentities} – {$site.name|htmlentities}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="{$website['keywords']|htmlentities}">
    <meta name="description" content="{$website['description']|htmlentities}">
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <link href="/assets/css/frontend.css" rel="stylesheet">
    <link href="/assets/css/common.css" rel="stylesheet">
    <script type="text/javascript">
        var require = {
            config: JSON.parse('{$config|json_encode}')
        };
    </script>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="__CDN__/assets/js/html5shiv.js"></script>
    <script src="__CDN__/assets/js/respond.min.js"></script>
    <![endif]-->
    <style>
        body{
            padding-top: 0 !important;
    
        }
        .userlist{flex:1;display: flex; flex-direction: column; margin: 10px; background-color: #fff; border-radius: 5px;padding:10px; border:3px solid #d3d3d3;}
        .userlist img{width: 100%; height:auto;}
        .paylist{margin-left: 15px; border:3px solid #fff;}
        .userlist.active,.paylist.active{border:3px solid #ff780d;}
    </style>
</head>
<body >
    <div id="app">
        <div id="loading" ref="loadNode">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_four"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_one"></div>
                </div>
            </div>
        </div>
        <section class="container">
            <div class="row">
                <div class="col-xs-12" style="position: relative;">
                    <img src="/assets/img/bg.jpg" width="100%" height="auto">
                    <div style="position: absolute; bottom: 30px; left:50px; color: #fff; font-size: 32px;">
                    购买闻道会员
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div  style="display:flex;flex-direction: row; background:#fff;padding:15px;">
                        <div :class="levelTab==item.id?`userlist active`:`userlist`" v-for="(item,index) in list" @click="handleCurrent(item.id)">
                            <img :src="item.image" height="auto">
                            <div style="display: flex; align-items: center;justify-content: space-between;">
                            <div style="font-size: 16px;color:#000;"> {{item.name}}</div>
                            <div style="font-size: 18px;color:#ff780d;"> ¥{{item.price}}</div>
                            </div>
                            <div style="font-size: 14px; color:#454545;">
                                {{item.description}}
                            </div>
                        </div>
                    
                    </div>
                    <div style="display:flex;flex-direction: row; background:#fff;align-items: center;padding:20px;">
                        <div style="padding:15px;font-size: 16px; font-weight: 600;">选择支付方式</div>
                        <img src="/assets/img/alipay.jpg" width="220px" height="100" @click="handleTab('wechat')" :class=" payTab == 'wechat'? `paylist active`:`paylist`">
                        <img src="/assets/img/weipay.jpg" width="220px" height="100" @click="handleTab('alipay')" :class=" payTab == 'alipay'? `paylist active`:`paylist`" >
                    </div>
                    <div style="padding:15px;">
                        <button class="btn btn-primary btn-block" @click="handleBuyLevel()">确认购买</button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v={$site.version|htmlentities}"></script>
</html>